<template>
  <ResultTable
    :columns="columns"
    :data-source="dataSource"
    :page="page"
    :page-size="pageSize"
    :loading="loading"
    :total="total"
    @change="onChange"
    :scroll="{ x: 1500 }"
  >
    <template #bodyCell="{ column, text, record }">
      <!-- 运输任务状态 -->
      <template v-if="column.dataIndex === 'status'">
        <div
          class="table-column-status"
          :class="text === 1 ? '1' : text === 2 ? '2' : text === 3 ? '3' : text === 4 ? '4' : '5'"
        >
          {{
            text === 1
              ? '待提货'
              : text === 2
              ? '在途'
              : text === 3
              ? '保留状态'
              : text === 4
              ? '已交付'
              : '已取消'
          }}
        </div>
      </template>
      <!-- 车辆装载状态 -->
      <template v-if="column.dataIndex === 'loadingStatus'">
        <div class="table-column-status" :class="text === 1 ? '1' : text === 2 ? '2' : '3'">
          {{ text === 1 ? '半载' : text === 2 ? '满载' : '空载' }}
        </div>
      </template>
      <!-- 任务分配状态 -->
      <template v-if="column.dataIndex === 'assignedStatus'">
        <div class="table-column-status" :class="text === 1 ? '1' : text === 2 ? '2' : '3'">
          {{ text === 1 ? '未分配' : text === 2 ? '已分配' : '待人工分配' }}
        </div>
      </template>
      <!--  -->
      <!-- 操作 -->
      <template v-if="column.key === 'operation'">
        <a-button @click="$router.push(`/Transport?id=${record.id}&type=运输管理`)" type="link"
          >查看</a-button
        >
      </template>
      <template v-if="column.key === 'operation'">
        <a-button type="link" disabled>取消</a-button>
      </template>
      <template v-if="column.key === 'operation'">
        <a-button @click="onOpenModal(record.id)" type="link">手动调整</a-button>
      </template>
    </template>
  </ResultTable>
  <!-- 弹出层 新增配置-->
  <ModalForm v-model:open="isOpenModal" @ok="getData()" :id="editId" />
</template>
<script setup>
import { ref } from 'vue'
import ResultTable from '@/components/ResultTable.vue'
import ModalForm from './ModalForm.vue'
// eslint-disable-next-line vue/no-dupe-keys
const emit = defineEmits(['change', 'update:page', 'update:pageSize', 'edit'])
// 表格头部数据
const columns = ref([
  {
    title: '序号',
    width: 50,
    dataIndex: 'index',
    key: 'index',
    align: 'center',
    // 🚨注意：表格序号自动递增，分页后也不影响
    customRender: ({ index }) => (props.page - 1) * props.pageSize + index + 1,
  },
  {
    title: '运输任务编号',
    width: 170,
    dataIndex: 'id',
    key: 'id',
  },
  {
    title: '车牌号码',
    dataIndex: ['truck', 'licensePlate'],
    key: 'licensePlate',
    width: 120,
  },
  {
    title: '起始地',
    dataIndex: ['startAgency', 'name'],
    key: 'name',
    width: 120,
  },
  {
    title: '目的地',
    dataIndex: ['endAgency', 'name'],
    key: 'name',
    width: 120,
  },
  {
    title: '运输任务状态',
    dataIndex: 'status',
    key: 'status',
    width: 120,
  },
  {
    title: '车辆装载状态',
    dataIndex: 'loadingStatus',
    key: 'loadingStatus',
    width: 120,
  },
  {
    title: '任务分配状态',
    dataIndex: 'assignedStatus',
    key: 'assignedStatus',
    width: 120,
  },
  {
    title: '计划发车时间',
    dataIndex: 'planDepartureTime',
    key: 'planDepartureTime',
    width: 150,
  },
  {
    title: '实际发车时间',
    dataIndex: 'actualDepartureTime',
    key: 'actualDepartureTime',
    width: 150,
  },
  {
    title: '更新时间',
    dataIndex: 'updated',
    key: 'updated',
    width: 200,
  },
  {
    title: '操作',
    key: 'operation',
    align: 'center',
    fixed: 'right',
    width: 240,
  },
])
// 接收数据
const props = defineProps({
  // 表格数据
  dataSource: {
    type: Array,
    default: () => [],
  },
  // 分页总数
  total: {
    type: Number,
    default: 0,
  },
  // 表格加载状态
  loading: {
    type: Boolean,
    default: false,
  },
  page: {
    type: Number,
    default: 1,
  },
  pageSize: {
    type: Number,
    default: 10,
  },
})
const onChange = ({ current, pageSize }) => {
  // 更新页码和页容量
  emit('update:page', current)
  emit('update:pageSize', pageSize)
  // 触发父组件的 change 事件
  emit('change', { page: current, pageSize: pageSize })
}
// 是否打开模态框
const isOpenModal = ref(false)
const editId = ref('')
const onOpenModal = (id) => {
  console.log(id)
  // if (id) {
  // 打开弹出层
  isOpenModal.value = true
  // 保存编辑车型id
  editId.value = id ? id : undefined
}
</script>
<style scoped>
#components-table-demo-summary tfoot th,
#components-table-demo-summary tfoot td {
  background: #fafafa;
}
[data-theme='dark'] #components-table-demo-summary tfoot th,
[data-theme='dark'] #components-table-demo-summary tfoot td {
  background: #1d1d1d;
}
.table-column-status {
  display: block;
}
</style>
